<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
		<title>电表查询</title>

		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />

		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			
			.header {
				width: 100%;
				background: #0c90d0;
				margin: 0;
				padding: 0;
				text-align: center;
				display: flex;
				justify-content: flex-start;
			}
			
			.header img {
				width: 0.18rem;
				height: 0.18rem;
				margin-top: 0.09rem;
				margin-left: 0.13rem;
			}
			
			.header span {
				font: 0.19rem/0.38rem "";
				color: #fff;
				margin-left: 1.08rem;
			}
			
			body h3 {
				font: 0.24rem/0.48rem "";
				color: #fff;
			}
			
			h4 {
				font: 0.15rem/0.3rem "";
				color: #373737;
			}
			
			.page_1 {
				width: 100%;
				margin-top: 30%;
			}
			
			.page_1 button {
				display: block;
				width: 1.5rem;
				margin: 0.5rem auto;
				height: 50px;
			}
			
			.smart_div {
				width: 88.2%;
				margin: 0 auto;
				margin-top: 0.01rem;
			}
			
			.smart_div ul {
				width: 100%;
			}
			
			.smart_div ul li {
				width: 100%;
				height: 0.56rem;
			}
			
			.smart_div ul li span {
				font-size: 0.15rem;
				color: #252525;
				display: inline-block;
				width: 0.79rem;
			}
			
			.smart_div ul li s {
				font: 0.15rem/0.56rem "";
				color: #222222;
				display: inline-block;
				margin-left: 0.34rem;
			}
			
			.smart_div ul li input {
				margin-left: 0.34rem;
			}
			
			.smart_div button {
				display: block;
				height: 0.36rem;
				width: 100%;
				margin-bottom: 0.015rem;
			}
			
			#rush_tips {
				color: red;
				display: block;
				margin: 0 auto;
				width: 50%;
				font: 0.12rem/0.16rem "";
				margin-left: 1.14rem;
			}
			
			#ID_card_tips {
				color: red;
				display: block;
				margin: 0 auto;
				width: 50%;
				font: 0.12rem/0.16rem "";
				margin-left: 1.14rem;
			}
			
			body #showResult {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background:rgba(52,52,52,.9);
				
				/*display: none;*/
			}
			
			body #showResult p {
				margin-left: 30%;
				margin-top: 82%;
				color: #FFFF00;
			}
		</style>
	</head>

	<body>
		<div id="showResult">
			<!--<img src="img/gif.gif"/>-->
			<p>正在加载中，请稍后...</p>
		</div>
		<!--<div class="header">
			<img src="img/fanhui.png" />
			<span>智能电表</span>
		</div>-->
		<div class="smart_div">
			<ul>
				<li>
					<span>区域：</span><s id="quyu"></s>
				</li>
				<li>
					<span>宿舍号：</span><s id="sushe"></s>
				</li>
				<li>
					<span>电表表号：</span><s id="dianbiao"></s>
				</li>
				<li>
					<span>用电状态：</span><s id="zhuangtai"></s>
				</li>
				<li>
					<span>剩余金额：</span><s id="shengyu"></s>
				</li>
				<li>
					<span>购电次数：</span><s id="cishu"></s>
				</li>
				<!--<li>
					<span>上一次购电金额：</span><s id="shangyici">50</s>
				</li>-->
				<li>
					<span>倍率：</span><s id="beilv"></s>
				</li>
				<li style="display: none;">
					<span>身份证号：</span><s id="SFZ"></s>				
				</li>
				<li>
					<span>购电金额：</span><input type="tel" name="num_rush" id="num_rush" placeholder="请输入购电金额,单位￥" value="" /><br />
					<s id="rush_tips"></s>
				</li>
				<!--<li>
					<span>身份证号：</span><input type="tel" name="ID_card" id="ID_card" placeholder="需要购电请输入身份证号" value="" /><br />
					<s id="ID_card_tips"></s>
				</li>-->
			</ul>
			<button id="smart_search" type="button" class="btn btn-primary">购电</button>
			<button id="goto_jilu" type="button" class="btn btn-primary">充值记录</button>			
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" id="close_close" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">提示信息</h4>
						</div>
						<div class="modal-body" id="tips">扣款成功</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<!--<button type="button" id="sure_pay" class="btn btn-primary">确定</button>-->
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>	
	</body>

</html>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/smart_mete.js" type="text/javascript" charset="utf-8"></script>